<!-- ToDoList -->
<!-- HTML代码 -->
<div id="app">
  <!-- 输入框 -->
  <input type="text" v-model="title" @keydown.enter="addTodo">
  <!-- 清理按钮 -->
  <button @click="clear">清理</button>
  <!-- 列表 -->
  <ul v-if="todos.length">
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.done">
      <span :class="{done:todo.done}"> {{todo.title}}</span>
    </li>
  </ul>
  <div v-else>
    暂时没事
  </div>
  <!-- 全选/完成进度 -->
  <div>
    全选<input type="checkbox" v-model="allDone">
    <span> {{active}} / {{all}} </span>
  </div>
</div>

<!-- CSS代码 -->
<style>
  .done {
    color: rgb(141, 141, 141);
    text-decoration: line-through;
  }
</style>


<!-- JS代码 -->
<script src="https://unpkg.com/vue@next"></script>
<script>
  const App = {
    data() {
      return {
        todos: [{
            title: '吃饭',
            done: false
          },
          {
            title: '睡觉',
            done: true
          },
          {
            title: '打豆豆',
            done: true
          },
        ]
      }
    },
    methods: {
      addTodo() {
        this.todos.push({
          title: this.title,
          done: false
        })
        this.title = ""
      },
      clear() {
        this.todos = this.todos.filter(v => !v.done)
      }
    },
    computed: {
      active() {
        return this.todos.filter(v => !v.done).length
      },
      all() {
        return this.todos.length
      },
      allDone: {
        get: function () {
          return this.active === 0
        },
        set: function (val) {
          this.todos.forEach(todo => {
            todo.done = val
          });
        }
      }
    }
  }
  // 启动应用
  Vue.createApp(App).mount('#app')
</script>